<template>
  <view class="container">
    <view class="header">
      <view class="back-arrow" @click="onBack"></view>
      <text class="title">订单管理</text>
      <view class="filter" @click="onFilter">
        <image class="filter-icon" src="@/static/images/filter.png"></image>
      </view>
    </view>
    <view class="search-bar">
      <view class="search-icon"></view>
      <input
        class="search-input"
        placeholder="搜索买家名称或单号"
        v-model="keyword"
        confirm-type="search"
        @confirm="onSearch"
      />
    </view>
    <view class="order-list">
      <view v-for="(order, index) in orders" :key="index" class="order-item">
        <view class="order-top">
          <text class="order-no">订单号：{{ order.orderId }}</text>
          <text class="order-time">
            {{ order.createTime }} 开单人：{{ order.opener }}
          </text>
        </view>

        <view class="buyer-info">
          <text class="buyer-name">{{ order.buyerName }}</text>
          <text
            v-if="order.payType === '实收'"
            class="pay-type pay-type-actual"
          >
            {{ order.payType }}：{{ order.amount }}
          </text>
          <text
            v-else
            class="pay-type pay-type-due"
          >
            {{ order.payType }}：{{ order.amount }}
          </text>
          <view class="btn-group">
            <button
              class="btn-modify"
              @click="onChangeOrder(order)"
            >
              改单
            </button>
            <button
              class="btn-share"
              @click="onShare(order)"
            >
              分享
            </button>
          </view>
        </view>

        <view class="goods-summary">
          <text class="summary-text">{{ order.summary }}</text>
        </view>
      </view>
    </view>
    <view class="footer-tip">已加载全部数据</view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface OrderItem {
  orderId: string
  buyerName: string
  amount: number
  payType: '实收' | '应收'
  summary: string
  createTime: string
  opener: string
}

const keyword = ref('')
const orders = ref<OrderItem[]>([
  {
    orderId: '00548',
    buyerName: '临时买家',
    amount: 9999,
    payType: '实收',
    summary: '芜湖青椒999×30 土豆2×3.6 西红柿699×5... 共5种商品',
    createTime: '2024-12-11 21:31',
    opener: '肖土举'
  },
  {
    orderId: '00547',
    buyerName: '临时买家',
    amount: 9999,
    payType: '应收',
    summary: '芜湖青椒999×30 土豆2×3.6 西红柿699×5... 共5种商品',
    createTime: '2024-12-11 21:31',
    opener: '肖土举'
  }
])

const onBack = () => {
  uni.navigateBack()
}

const onFilter = () => {
  console.log('点击筛选')
}

const onSearch = () => {
  console.log('搜索内容:', keyword.value)
}

// 下拉刷新
// onPullDownRefresh(() => {
//   console.log('触发下拉刷新')
//   fetchOrders()
// })

function fetchOrders() {
  setTimeout(() => {
    uni.stopPullDownRefresh()
    console.log('订单数据已更新')
  }, 1500)
}

function onChangeOrder(order: OrderItem) {
  console.log('点击改单:', order)
}

function onShare(order: OrderItem) {
  console.log('点击分享:', order)
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.back-arrow {
  position: absolute;
  left: 20rpx;
  width: 30rpx;
  height: 30rpx;
  background: url("@/static/images/back.png") no-repeat center;
  background-size: contain;
}
.title {
  font-size: 36rpx;
  color: #000;
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.filter {
  position: absolute;
  right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.filter-icon {
  width: 32rpx;
  height: 32rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 80rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.search-icon {
  width: 40rpx;
  height: 40rpx;
  background: url("@/static/images/search.png") no-repeat center;
  background-size: contain;
  margin-right: 10rpx;
}
.search-input {
  flex: 1;
  font-size: 24rpx;
  border: none;
  outline: none;
}

.order-list {
  display: flex;
  flex-direction: column;
}
.order-item {
  background-color: #fff;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.order-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}
.order-no {
  font-size: 24rpx;
  color: #0ab88a;
}
.order-time {
  font-size: 22rpx;
  color: #999;
}
.buyer-info {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.buyer-name {
  font-size: 28rpx;
  font-weight: 700;
  color: #333;
  margin-right: 30rpx;
}
.pay-type {
  font-size: 26rpx;
  margin-right: 20rpx;
}
.pay-type-actual {
  color: #00b510;
}
.pay-type-due {
  color: #f54444;
}
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  margin-bottom: -50rpx;
}
.btn-modify {
  border: 1rpx solid #f60;
  background-color: #fff;
  color: #f60;
  border-radius: 6rpx;
  padding: 1rpx 24rpx;
  font-size: 24rpx;
}
.btn-share {
  border: 1rpx solid #07c160;
  background-color: #07c160;
  color: #fff;
  border-radius: 6rpx;
  padding: 1rpx 24rpx;
  font-size: 24rpx;
}
.goods-summary {
  margin-bottom: 10rpx;
}
.summary-text {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
}
.footer-tip {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 30rpx 0;
}
</style>
